<template>
  <div class="count">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="商品名称" width="300">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }} </el-tag>
              <br/>
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.imageUrl"
                :fit="fit"
              ></el-image>
            </div>
          </el-popover>
        </template>
      </el-table-column>


      <el-table-column label="商品描述" width="400">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <span style="margin-left: 10px">{{
            scope.row.description}}</span>
        </template>
      </el-table-column>


      <el-table-column label="商品单价" width="300">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <span style="margin-left: 10px">{{
            scope.row.price}}</span>
        </template>
      </el-table-column>

    
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.productId)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.productId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <span class="demonstration">调整每页显示条数</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage2"
        :page-sizes="[1, 5, 10, 15, 20]"
        :page-size="limit"
        layout="sizes, prev, pager, next"
        :total="mytotal"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
  <script>
import nestedApi from '@/api/nested';

export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          username: "王小虎",
          admin: "1",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          username: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          username: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          username: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      formInline: {
        username: "",
        admin: "",
      },
      mytotal: 50,
      limit: 5,
      currentPage2: 1,
    };
  },
  created() {
  //  this.alllist()
  this.alllistByPage(1,5)
  },
  methods: {
 
    /**
     * "productId": 1,
      "name": "老头椅",
      "description": "折叠椅户外露营椅子便携式凳子钓鱼椅马扎超轻野餐美术生休闲沙滩\r\n折叠椅户外露营椅子便携式凳子钓鱼椅马扎超轻野餐美术生休闲沙滩",
      "price": 10,
      "quantity": null,
      "imageUrl": "https://img14.360buyimg.com/n7/jfs/t1/114591/33/36469/165098/6470fa95F6ada4a33/dd1305eb5c4443a3.jpg",
      "categoryId": 1,
      "createdDate": "2023-05-02T15:52:52",
      "publisherId": null
     */
    alllist(){
      nestedApi.alllist().then(res=>{
        this.tableData = res.data;
      })
    },

    //分页查询商品列表
    alllistByPage(current,limit){
      nestedApi.alllistByPage(current,limit).then(res=>{
        console.log(res.data)
        this.tableData = res.data.records;
        this.mytotal = res.data.total;
      })
    },
 

    // onSubmit() {
    //   mytable.getListBytt(this.formInline).then((res) => {
    //     this.tableData = res.data;
    //   });
    // },

    //删除商品
    handleDelete(id) {
      nestedApi.handleDelete(id).then((res) => {
        alert("删除成功");
        //成功后重新刷新页面
        this.alllistByPage(1,5);
      });
    },

    // 跳转
    handleEdit(id) {
      this.$router.push("/nested/menu2/" + id);
    },

    // 分页查询
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this.alllistByPage(1, val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage2 = val;
      this.alllistByPage(val, this.limit);
    },
  },
};
</script>
  
  <style scoped>
  .count{
    border-top: 1px solid red;
    margin: 0 auto;
  }
</style>
  